| 前端页面分辨率适配 前端自适应 最快速实现方法 | 您所在的位置：网站首页 › 1366*768 比例 › 前端页面分辨率适配 前端自适应 最快速实现方法 |
|
方法1：
很取巧的方式，就是按设计稿开发好固定尺寸的页面后，然后根据各种分辨率进行放大缩小。 // 优点：不用考虑适配问题，按设计稿进行固定尺寸开发 function bodyScale() { var devicewidth = document.documentElement.clientWidth;//获取当前分辨率下的可是区域宽度 var scale = devicewidth / 1366; // 分母——设计稿的尺寸 document.body.style.zoom = scale;//放大缩小相应倍数 } bodyScale(); 方法2：rem布局 根据分辨率的宽度，计算当前屏幕的分辨率宽与设计图宽一个比例值 例如 设计图宽 1366 实际屏幕 1920 比例值 1920/1366 然后把这个比例值赋给body的font-size 第一步：给body设置font-size：XXpx; （XX是计算得出的） 第二步：对照设计图开发页面时: 设计图是多少px，写css写成多少rem即可 该设置有个坑，就是在低版本浏览器，大概版本号70多的chrome不支持body设置font-size设置的1px, 最小支持12px, 写成1px虽然方便，最好是写成20px,100px等好换算的单位。 方法3 vue项目中使用postcss-px2rem的方法总结在项目中为了屏幕适配，经常会用到rem，postcss-px2rem就是为了让我们直接在将代码中px自动转化成对应的rem的一个插件.(下边的方法适用于使用cli2脚手架搭建的项目,现在好多数项目使用cli3搭建,在这篇文章增加了对cli3项目自适应的配置.) 如何使用： 1.安装npm i postcss-px2rem --save -dev 2.设置 1）.找到项目根目录下的.postcssrc文件 module.exports = { "plugins": { "postcss-import": {}, "postcss-url": {}, // to edit target browsers: use "browserslist" field in package.json "autoprefixer": { "browsers": ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 8'] }, 'postcss-px2rem':{'remUnit':75} //配置rem基准值，75是iphone6标准 } }remUnit: 75 代表 1rem = 75px; 所以当你一个75px值时，它会自动转成 (75px/75)rem, 转化完之后，你还需要在根元素设置他的font-size,因为rem是相对根元素来设置大小的 html { font-size: 10vw; }这样的话我们设置的px值 就变成对应的 10%的屏幕宽度 *(实际px/75) 2） 找到根目录下的vue-loader.conf.js 本人使用的是这种方法. 首先需要设置html的fontsize值,1rem = html的font-size,这里咱们动态设置一下,可以直接在index.html中设置 PC端 (function () { function setRootFontSize() { let rem, rootWidth; let rootHtml = document.documentElement; //限制展现页面的最小宽度 rootWidth = rootHtml.clientWidth < 1366 ? 1366 : rootHtml.clientWidth; // 19.2 = 设计图尺寸宽 / 100（ 设计图的rem = 100 ） rem = rootWidth / 19.2; // 动态写入样式 rootHtml.style.fontSize = `${rem}px`; } setRootFontSize(); window.addEventListener("resize", setRootFontSize, false); })();移动端 (function () { function setRootFontSize() { let dpr, rem, scale, rootWidth; let rootHtml = document.documentElement; dpr = window.devicePixelRatio || 1; //移动端必须设置 //限制展现页面的最小宽度 rootWidth = rootHtml.clientWidth < 1366 ? 1366 : rootHtml.clientWidth; rem = rootWidth * dpr / 19.2; // 19.2 = 设计图尺寸宽1920 / 100（设计图的rem = 100） scale = 1 / dpr; // 设置viewport，进行缩放，达到高清效果 (移动端添加) let vp = document.querySelector('meta[name="viewport"]'); vp.setAttribute('content', 'width=' + dpr * rootHtml.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no'); // 动态写入样式 rootHtml.style.fontSize = `${rem}px`; } setRootFontSize(); window.addEventListener("resize", setRootFontSize, false); window.addEventListener("orientationchange", setRootFontSize, false); //移动端 })(); image.png 'use strict' const utils = require('./utils') const config = require('../config') const isProduction = process.env.NODE_ENV === 'production' const sourceMapEnabled = isProduction ? config.build.productionSourceMap : config.dev.cssSourceMap const px2rem = require('postcss-px2rem') module.exports = { loaders: utils.cssLoaders({ sourceMap: sourceMapEnabled, extract: isProduction }), cssSourceMap: sourceMapEnabled, cacheBusting: config.dev.cacheBusting, transformToRequire: { video: ['src', 'poster'], source: 'src', img: 'src', image: 'xlink:href' }, postcss: function() { return [px2rem({remUnit: 100})]; } }修改完成后 记得重新编译 |
| CopyRight 2018-2019 实验室设备网 版权所有 |